<script setup>
import axios from 'axios';
import { ref } from 'vue'
import { h } from 'vue';
const tableData = ref([])
const stateList = ref([])
const stateL = ref([])
const form=ref({})
const photo=ref();
const attFile=ref([]);
const dialogTableVisible=ref();
const data=new FormData();
const Hlist=ref([]);
const tempStateId=ref();
const form1=new FormData();
const form2=new FormData();
const flag=ref();
const test=ref(false);

const msgForm=ref();
const File=ref({
  label:'',
  value:''
});   

const genderL=[
  {
    value:'男',
    label:'男'
  },
  {
    value:'女',
    label:'女'
  }
];

// //校验规则
// const nameCheck=(rule,value,callback)=>{
//   console.log(msgForm.value.clearValidate);
//   msgForm.value.clearValidate();
//   console.log('调用规则');
//   console.log(value);
//   if(value===''){
//     console.log('姓名不能为空');
//     callback(ElNotification({
//       title: '输入错误！',
//       message: h('i', { style: 'color: teal' }, '姓名不能为空!'),
//       duration: 2000,
//       }));
//   }
//   // else{
//   //   return callback();
//   // }
// }


// const WxnameCheck=(rule,value,callback)=>{
//   console.log('调用规则');
//   console.log(value);
//   if(value===''){
//     console.log('姓名不能为空');
//     callback(ElNotification({
//       title: '输入错误！',
//       message: h('i', { style: 'color: teal' }, '微信名不能为空!'),
//       duration: 2000,
//       }));
//   }
//   // else{
//   //   return callback();
//   // }
// }

// const StudentIdCheck=(rule,value,callback)=>{
//   console.log('调用规则');
//   console.log(value);
//   if(value===''){
//     console.log('姓名不能为空');
//     callback(ElNotification({
//       title: '输入错误！',
//       message: h('i', { style: 'color: teal' }, '学号不能为空!'),
//       duration: 2000,
//       }));
//   }
//   // else{
//   //   return callback();
//   // }
// }
// const rules=ref({
//   value:{
//   name:[{validator:nameCheck,trriger:''}],
//   wxName:[{validator:WxnameCheck,trriger:blur}],
//   studentId:[{validator:StudentIdCheck,trriger:blur}],
//   }
// });

//渲染用户列表
const userList = async()=>{

 await axios({
  url:'http://175.178.62.164:61803/student/states',
}).then(result=>{
  stateList.value = result.data.data
  console.log(stateList.value[0]);
})

   axios({
  url: 'http://175.178.62.164:61803/student/list',
}).then(result => {
  for (let i = 0; i < result.data.data.length; i++) {
    tableData.value.push({
      name: result.data.data[i].studentInfo.name,
      grade: result.data.data[i].studentInfo.grade,
      major: result.data.data[i].studentInfo.major,
      gender: result.data.data[i].studentInfo.gender?'女':'男',
      phone: result.data.data[i].studentInfo.phone,
      state:stateList.value[result.data.data[i].stateId],
      openid:result.data.data[i].openid,
      drawer:false
    })
  }
})
}
userList()//先调用一波再说
const open=(user,form)=>{         //请求详细信息大多请求的开头，可以共用openid
    data.set('openid',user.openid);

    console.log(user.openid);
    axios.post('http://175.178.62.164:61803/studentinfo/detail',data)                //拿到用户详情
    .then(result=>{
      form.value=result.data.data; 

      console.log('这是详情'+result);
      form.value['gender']=form.value.gender?'女':'男';   //将拿到的值，转为具象化所指向的值
      
      tempStateId.value=stateList.value[form.value.student.stateId];
      console.log('暂时的stateId:');
      console.log(tempStateId);

      photo.value="http://175.178.62.164:61803/"+form.value.photo;

      user.drawer=true;   //控制抽屉
      console.log('open后的dialog:'+user.drawer);
      
    });
}
//获取全部状态，下拉框
const CaptureState=()=>{
  if(stateL.value.length==0){
    for (let i = 0; i < stateList.value.length; i++) {
      stateL.value.push({
        value:i,
        label:stateList.value[i]
      });
    }
  }
}

const Alist=()=>{
      //请求附件
      console.log('请求附件');
      axios.post('http://175.178.62.164:61803/attachment/manager/list',data).then(res=>{
        if(res.data.data.length==0){
          console.log('没有附件列表');
        }
        else{         //定义一个数组接受附件
          if(attFile.value.length==0){
            for(let i=0;i<res.data.data.length;i++){
              attFile.value.push({
                attachment:"http://175.178.62.164:61803/"+res.data.data[i].attachment,     //附件url
                remark:res.data.data[i].remark,                                             //文件名
                createTime:res.data.data[i].createTime                                       //发送时间
              });
            }
          }
        }
       }).catch(err=>{
        console.log(err);
       })
}

const downLoad=(url,filename)=>{
  console.log(url);
  let a = document.createElement('a'); 
    a.style = 'display: none'; // 创建一个隐藏的a标签
    a.download = filename;
    a.href = url;
    a.target="_blank";
    document.body.appendChild(a);
    a.click(); // 触发a标签的click事件
    document.body.removeChild(a);
}

const CloseDrawer=async(user,form)=>{

    // console.log(msgForm.value.validate);
    // msgForm.value.validate().then(()=>{
     
    //   console.log('成功判断');
    // })
    // 表单判断
    if(form.value.wxName===''){
      msgForm.value.scrollToField('value.wxName');
      ElNotification({
      title: '输入错误！',
      message: h('i', { style: 'color: teal' }, '微信名不能为空!'),
      duration: 2000,
      })
      return;
    }
    if(form.value.studentId===''){
      msgForm.value.scrollToField('value.studentId');
      ElNotification({
      title: '输入错误！',
      message: h('i', { style: 'color: teal' }, '学号不能为空!'),
      duration: 2000,
      })
      return;
    }
    if(form.value.name===''){
      msgForm.value.scrollToField('value.name');
      ElNotification({
      title: '输入错误！',
      message: h('i', { style: 'color: teal' }, '姓名不能为空!'),
      duration: 2000,
      })
      return;
    }
    if(form.value.gender===''){
      msgForm.value.scrollToField('value.gender');
      ElNotification({
      title: '输入错误！',
      message: h('i', { style: 'color: teal' }, '性别不能为空!'),
      duration: 2000,
      })
      return;
    }
    if(form.value.grade==''){
      msgForm.value.scrollToField('value.grade');
      ElNotification({
      title: '输入错误！',
      message: h('i', { style: 'color: teal' }, '年级不能为空!'),
      duration: 2000,
      })
      return;
    }
    if(form.value.major===''){
      msgForm.value.scrollToField('value.major');
      ElNotification({
      title: '输入错误！',
      message: h('i', { style: 'color: teal' }, '专业不能为空!'),
      duration: 2000,
      })
      return;
    }
    if(form.value.classNumber===''){
      msgForm.value.scrollToField('value.classNumber');
      ElNotification({
      title: '输入错误！',
      message: h('i', { style: 'color: teal' }, '班号不能为空!'),
      duration: 2000,
      })
      return;
    }
    if(form.value.phone===''){
      msgForm.value.scrollToField('value.phone');
      ElNotification({
      title: '输入错误！',
      message: h('i', { style: 'color: teal' }, '手机号不能为空!'),
      duration: 2000,
      })
      return;
    }
    if(form.value.reason===''){
      msgForm.value.scrollToField('value.reason');
      ElNotification({
      title: '输入错误！',
      message: h('i', { style: 'color: teal' }, '加入理由不能为空!'),
      duration: 2000,
      })
      return;
    }
    if(form.value.introduce===''){
      msgForm.value.scrollToField('value.introduce');
      ElNotification({
      title: '输入错误！',
      message: h('i', { style: 'color: teal' }, '个人介绍不能为空!'),
      duration: 2000,
      })
      return;
    }
    if(form.value.experience===''){
      msgForm.value.scrollToField('value.experience');
      ElNotification({
      title: '输入错误！',
      message: h('i', { style: 'color: teal' }, '个人经历不能为空!'),
      duration: 2000,
      })
      return;
    }
    if(form.value.prize===''){
      msgForm.value.scrollToField('value.prize');
      ElNotification({
      title: '输入错误！',
      message: h('i', { style: 'color: teal' }, '获奖情况不能为空!'),
      duration: 2000,
      })
      return;
    }

  await ElMessageBox.confirm(         //修改信息提示
    '是否要修改信息?',
    'Warning',
    {
      confirmButtonText: '修改',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '修改成功!',
      });

        //影响桌面数据
      if(stateList.value[form.value.student['stateId']]==tempStateId.value){    //若未变动
          form1.set('stateId',form.value.student['stateId']);
          user.state=tempStateId.value;
      }
      else{                                                                  //若变动
        form1.set('stateId',tempStateId.value);
        user.state=stateList.value[tempStateId.value];
      }

      form1.set('openid',form.value.openid);
      form1.set('wxName',form.value.wxName);
      form1.set('studentId',form.value.studentId);
      form1.set('name',form.value.name);
      if(form.value.gender=='男')
        form1.set('gender','0');
      else if(form.value['gender']=='女')
      form1.set('gender','1');

      form1.set('grade',form.value.grade);      //年级，要int-32位!!

      form1.set('major',form.value.major);
      form1.set('classNumber',form.value.classNumber);
      form1.set('phone',form.value.phone);
      form1.set('remark',form.value.remark);
      form1.set('photo',form.value.photo);        //图片url
      form1.set('reason',form.value.reason);
      form1.set('introduce',form.value.introduce);
      form1.set('experience',form.value.experience);
      form1.set('prize',form.value.prize);

      axios.post('http://175.178.62.164:61803/studentinfo/modify',form1).then(res=>{
        console.log('修改成功');
      }).catch(err=>{
        console.log(err);
      })

      form2.set('openid',form.value.openid);
      form2.set('arrangement',form.value.remarks['arrangement']);
      form2.set('conclusion',form.value.remarks['conclusion']);
      form2.set('remarks',form.value.remarks['remark']);
      //修改管理员备注的请
      axios.post('http://175.178.62.164:61803/remarks/save',form2).then(res=>{
        console.log('修改管理员备注成功');
      }).catch(res=>{
        console.log(err);
      })
    //修改桌面显示的信息
      user.name=form.value.name;
      user.grade=form.value.grade;
      user.major=form.value.major;
      user.gender=form.value.gender;
      user.phone=form.value.phone;

      })
    .catch(() => {
      ElMessage({
        type: 'error',
        message: '取消修改!',
      });
    })
    
    
    //还要清空attFile的长度
}


const history_list=()=>{              //打开历史模板消息
  dialogTableVisible.value=true;
  if(Hlist.value.length!=0){
    return;
  }
  axios({
    url:'http://175.178.62.164:61803/message/list',
    method:'post',
    data:data
  }).then(res=>{
    console.log(res);
    for(let i=0;i<res.data.data.length;i++){
      Hlist.value.push({
        title:res.data.data[i].title,
        content:res.data.data[i].content,
        managerName:res.data.data[i].managerName,
        createTime:res.data.data[i].createTime,
        name:res.data.data[i].name,
        detail:false
      });
      if(res.data.data[i].hasOwnProperty('feedback'))   //若有这个属性
      {
        Hlist.value[i]['feedbackTime']=res.data.data[i].feedback.createTime,
        Hlist.value[i]['feedbackContent']=res.data.data[i].feedback.content
    }
    else{
      Hlist.value[i]['feedbackTime']='',
      Hlist.value[i]['feedbackContent']='暂无反馈'
    }
   }
  }).catch(err=>{
    console.log(err);
  })
}

const Look_message=async(message)=>{
  message.detail=true;
}

const messageClose=(message)=>{
  message.detail=false;
}

const handleClose=(user,form)=>{
  File.value.value='';
  Hlist.value=[];
  attFile.value=[];
  user.drawer=false;                      //关闭
//  await CloseDrawer(user,form);

//  await ElMessageBox.confirm(
//     '是否退出编辑?',
//     'Warning',
//     {
//       confirmButtonText: '是',
//       cancelButtonText: '否',
//       type: 'warning',
//     }
//   ).then(() => {
//       ElMessage({
//         type: 'success',
//         message: '退出成功!',
//       });
//       user.drawer=false;
//     })
//     .catch(() => {
//       ElMessage({
//         type: 'info',
//         message: '退出失败!',
//       });
//       user.drawer=true;
//     })
}
</script>

<template>
  <div class="containerBox">
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="grade" label="年级" />
      <el-table-column prop="major" label="专业" />
      <el-table-column prop="gender" label="性别" />
      <el-table-column prop="phone" label="电话" />
      <el-table-column prop="state" label="状态" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="open(scope.row,form)" type="primary" drawer>查看/编辑</el-button>
          <el-drawer
            class="TT"
            v-model="scope.row.drawer"
            :modal-append-to-body="false"
            :append-to-body="true"
            :with-header="false"
            size=500
            @close="handleClose(scope.row,form)"
          >
          <div class="Header"><p>用户信息</p></div>
          <el-form :model="form" label-position="right" label-width="5.5vw" ref="msgForm">
            <el-form-item label="证件照" class="TT picture_label">
              <img :src=photo class="picture">
            </el-form-item>
            <el-form-item label="姓名" class="TT" prop="value.name" error>
              <el-input v-model="form.value.name" autocomplete="off"  type="text"></el-input>
            </el-form-item>
            <el-form-item label="学号" class="Disabled" prop="value.studentId">
              <el-input v-model="form.value.studentId" autocomplete="off"  type="text"></el-input>
            </el-form-item>
            <el-form-item label="年级" class="TT">
              <el-input v-model.Number="form.value.grade" type="text" ></el-input>
            </el-form-item>
            <el-form-item label="专业" class="TT">
              <el-input v-model="form.value.major" type="text"></el-input>
            </el-form-item>
            <el-form-item label="班号" class="TT">
              <el-input v-model="form.value.classNumber" autocomplete="off"  type="text" ></el-input>
            </el-form-item>
            <el-form-item label="性别" class="TT">
              <el-select v-model="form.value.gender">
                <el-option
                  v-for="item in genderL"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="手机号码" class="TT">
              <el-input v-model="form.value.phone" type="text" ></el-input>
            </el-form-item>
            <el-form-item label="openid" class="Disabled">
              <el-input v-model="form.value.openid" autocomplete="off"  type="text" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="微信名" class="Disabled TT" prop="value.wxName">
              <el-input v-model="form.value.wxName" autocomplete="off"  type="text" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="状态" class="TT">
              <el-select
                @focus="CaptureState"
                v-model="tempStateId"
              >
              <el-option
                v-for="item in stateL"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
              </el-select>
            </el-form-item>
            <el-form-item label="个人介绍" class="TT">
              <el-input v-model="form.value.introduce" type="text" ></el-input>
            </el-form-item>
            <el-form-item label="个人经历" class="TT">
              <el-input
                v-model="form.value.experience"
                :autosize="{ minRows: 3, maxRows: 7 }"
                resize="none"
                type="textarea"
              />
            </el-form-item>
            <el-form-item label="加入理由" class="TT">
              <el-input v-model="form.value.reason" type="text" ></el-input>
            </el-form-item>
            <el-form-item label="获奖情况" class="TT">
              <el-input
                v-model="form.value.prize"
                :autosize="{ minRows: 3, maxRows: 7 }"
                resize="none"
                type="textarea"
              />
            </el-form-item>
            <el-form-item label="备注" class="TT">
              <el-input
                v-model="form.value.remark"
                :autosize="{ minRows: 1, maxRows: 7 }"
                resize="none"
                type="textarea"
              />
            </el-form-item>

            <el-form-item label="附件列表" class="TT" >
              <el-select
                placement='left-start'
                v-model="File.value"
                @focus="Alist"
                no-data-text="暂无附件"
              >
              <el-option v-for="item in attFile"
                :key="item.attachment"
                :label="item.remark"
                :value="item.attachment"
              />
              </el-select>
              <el-button type="primary" @click="downLoad(File.value,File.label)" class="downLoad_button">查看</el-button>
            </el-form-item>

            <el-form-item label="历史消息" class="TT">
             <el-button type="primary" @click="history_list">查看历史消息</el-button>
            </el-form-item>
            <el-dialog v-model="dialogTableVisible" title="历史模板消息">
              <el-table :data="Hlist" width="100%" fit :highlight-current-row="true"	class="message_content">
                <el-table-column prop="createTime" label="发起时间" width="180" />
                <el-table-column prop="title" label="标题" width="100" :show-overflow-tooltip="true"/>
                <el-table-column prop="content" label="内容" width="200" class="message_content" :show-overflow-tooltip="true"/>
                <el-table-column prop="managerName" label="管理员" width="100"/>
                <el-table-column label="查看">
                <template #default="scope">
                  <el-button type="primary" @click="Look_message(scope.row)">查看</el-button>
                  <el-dialog
                    @close="messageClose(scope.row)" 
                    v-model="scope.row.detail" 
                    title="消息详情" 
                    :modal-append-to-body="false"  
                    :append-to-body="true"
                    >
                    <div class="header">
                      <div class="title">标题:{{scope.row.title}}</div>
                      <div class="createTime">发送时间：{{ scope.row.createTime }}</div>
                    </div>
                    <el-divider class="message_divider"/>
                    <div class="name">      <!-- 名字 -->
                      <p>学生:{{ scope.row.name }}</p>
                      <p>管理员:{{ scope.row.managerName }}</p>
                    </div>
                    <div class="main">
                       <p>内容:</p>
                       <p class="feedbackContent">{{ scope.row.content }}</p>
                    </div>
                    <el-divider class="message_divider"/>
                    <div class="main">
                      <p><span>反馈时间:{{ scope.row.feedbackTime }}</span></p>
                      <p>反馈内容:</p>
                      <p class="feedbackContent">{{ scope.row.feedbackContent }}</p>
                    </div>
                  </el-dialog>
                </template>
                </el-table-column>
              </el-table>
            </el-dialog>


            <el-divider />

            <el-form-item label="安排" class="TT">
              <el-input
                v-model="form.value.remarks.arrangement"
                :autosize="{ minRows: 1, maxRows: 7 }"
                resize="none"
                type="textarea"
              />
            </el-form-item>

            <el-form-item label="结论" class="TT">
              <el-input
                v-model="form.value.remarks.conclusion"
                :autosize="{ minRows: 1, maxRows: 7 }"
                resize="none"
                type="textarea"
              />
            </el-form-item>

            <el-form-item label="管理员备注" class="TT">
              <el-input
                v-model="form.value.remarks.remark"
                :autosize="{ minRows: 1, maxRows: 7 }"
                resize="none"
                type="textarea"
              />
            </el-form-item>
          <el-button class="button" type="primary" @click="CloseDrawer(scope.row,form)">保存</el-button>
        </el-form>
          </el-drawer>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
p,span{
  word-wrap: break-word;
}
.containerBox {
  background-color: #fff;
  margin: 0 1vw;
}
.Header{
  font-weight: bold;
  text-align: center;
}
.picture_label{
  align-items: center;
}
.picture{
  width: 50%;
  object-fit: fill;
  margin-left: 3vw;
}
.Disabled{
  background-color:white !important;
  -webkit-text-fill-color:black;
}
.Disabled ::v-deep .el-input.is-disabled .el-input__wrapper{
    background-color:white !important;
}
.Disabled ::v-deep .el-input.is-disabled .el-input__inner{
  -webkit-text-fill-color:black;
}
.TT{
  color:black!important;
  --el-input-text-color:black!important;
  --el-text-color-regular: black!important;
}
.TT ::v-deep .el-input__inner{
  color:black!important;
  --el-text-color-regular: black!important;
  --el-input-text-color:black!important;
}
.TT ::v-deep .el-form-item__label{
  --el-text-color-regular: black!important;
  --el-input-text-color:black!important;
}
/* .message_box ::v-deep .el-divider--horizontal{
  margin: 0 0;
} */
.message_divider{
  margin: 1vh 0;
}
.title{
    font-size: 1.2vw;
    margin: 0 0 1vh 0;
}
.createTime{
    font-size: 1.1vw;
}
.name{
  display: flex;
  font-size: 1.1vw;
  justify-items: center;
}
.name p{
  margin: 0 1vw 1vh 0;
}
.main{
  font-size: 1.1vw;
}
.main p{
  margin: 0 0 1vh 0;
  font-size: 1.2vw;
}
.downLoad_button{
  margin: 0 0 0 2vw;
}
.button{
  margin-left: 10vw;
  width: 8vw;
}
.main>p{
  word-wrap: break-word;
}
</style>

<style>
.message_content .el-popper.is-dark{
  text-overflow: ellipsis;
  overflow: hidden;
  display:-webkit-box;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-width: 10vw; 
}
.feedbackContent{
  text-indent:1em;
}
.message_box  .el-dialog__header{
  padding-bottom: 0vh;
}
.message_box  .el-dialog__body{
  padding-top: 2vh;
  height: 60vh;
  max-height: 60vh;
  overflow: auto;
}
</style>